<template>
	<view class="server-box">
		<!-- 头部导航栏 -->
		<view class="top">
			<view class="top_content">
				<image
					src="https://lanhu.oss-cn-beijing.aliyuncs.com/pspv8yj6u92m9q2buvs75jesao0yygps8d30ce0838-4f7a-4509-957a-0362fbe71dcb"
					mode="" @click="back"></image>
				<view class="txt">便民服务</view>
			</view>
		</view>
		<!-- 宫格列表 -->
		<view class="list">
			<view class="list_contnet" v-for="item in listData" :key="item.text">
				<image :src="item.icon" mode=""></image>
				<text>{{item.text}}</text>
			</view>
		</view>
		<!-- 马上领取 -->
		<view class="receive">
			<view class="left">
				<image
					src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps5mqkd10nsqvaght424antun9jd7icouhf6d885d9f-df8a-4954-b12d-99f7d9266a72"
					mode=""></image>
				<text>积分商城上线啦~现金红包派送中！</text>
			</view>
			<view class="right">马上领取</view>
		</view>

		<!-- 保洁到家 -->
		<view class="group_4">
			<view class="group_cont" v-for="items in groupData" :key="items.text2" :style="{background: items.boxBg}">
				<view class="txt_box">
					<view :style="{color: items.text1Color}">{{items.text1}}</view>
					<view :style="{color: items.text2Color}">{{items.text2}}</view>
				</view>
				<view class="bg_box"
					:style="{backgroundImage:'url('+items.bgImage+')',width:items.W+'rpx',height:items.H+'rpx'}"></view>
			</view>
		</view>
		
		<!-- 物管办公室 -->
		<view class="office">
			<view class="tit">
				<image src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps3aqgdsr61idqrgcx2s19arilt6pt37hkcaaf96ae5-1223-48f4-9762-a372c00fba82" mode=""></image>
				<text>物管办公室：中小学下午托管正式开启</text>
			</view>
			<view class="txt">凡是本小区的居民，皆可报名，满10人可开团一次，托管内容包括：晚餐和作业辅导。</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listData: [{
						icon: 'https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/19a8b2a2646c49329706815fbcdda75d_mergeImage.png',
						text: '警务'
					},
					{
						icon: 'https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/9126d9eda29f449db5083f4696f00a2d_mergeImage.png',
						text: '医疗'
					},
					{
						icon: 'https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/af72dcba27af48c3b57d6258c1163e3e_mergeImage.png',
						text: '家政'
					},
					{
						icon: 'https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/d1a5990c221b48f6827ad724bf4de684_mergeImage.png',
						text: '托管'
					},
					{
						icon: 'https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/853e38c1fc334136877c39d34bca0766_mergeImage.png',
						text: '团购'
					},
					{
						icon: 'https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/2abca30a45154142bb39bd28f24ab31e_mergeImage.png',
						text: '全部'
					},
				],
				groupData: [{
						text1: "保洁到家",
						text2: "消杀防疫",
						text1Color: "#6793D1",
						text2Color: "#556D8D",
						boxBg: "linear-gradient(0deg, #EBF5FD 0%, #F5FEFF 100%)",
						bgImage: "https://lanhu.oss-cn-beijing.aliyuncs.com/psujrjigii54klwesah8n3nb50kvs5dfn2191f7ff-e2c0-4d2b-924e-237615a6e805",
						imgColor: "linear-gradient(180deg, #F3DB9B, #7AB0DF, #ACDDF5)",
						W: 64,
						H: 82,
					},
					{
						text1: "上门修理",
						text2: "快速上门",
						text1Color: "#FF8A12",
						text2Color: "#B6914F",
						boxBg: "linear-gradient(0deg, #FFF3DE 0%, #FEFBF0 100%",
						bgImage: "https://lanhu.oss-cn-beijing.aliyuncs.com/psw1p298pwp5ngucbpc2xssfliyflzpdnd7e7bbcea-2c4c-4fbf-9343-840d250970e6",
						imgColor: "linear-gradient(180deg, #F3DB9B, #F7C86C, #F7E0AF)",
						W: 90,
						H: 66,
					},
					{
						text1: "家具维修",
						text2: "以旧换新",
						text1Color: "#EE716B",
						text2Color: "#AF7259",
						boxBg: "linear-gradient(0deg, #F9E8E2 0%, #FFF4F3 100%",
						bgImage: "https://lanhu.oss-cn-beijing.aliyuncs.com/pskoxh2167jf1hib5cvwk7qqojco8fgyae79c3a48-a631-472c-a057-983e41dfbb0f",
						imgColor: "linear-gradient(180deg, #F3DB9B, #F38F6C, #FACDBC)",
						W: 88,
						H: 80,
					},
					{
						text1: "洗衣修鞋",
						text2: "上门取件",
						text1Color: "#52A7BD",
						text2Color: "#4D6F76",
						boxBg: "linear-gradient(0deg, #E1F5FA 0%, #EDFDFC 100%",
						bgImage: "https://lanhu.oss-cn-beijing.aliyuncs.com/psa931egurqgjxz0uao6fq9cxlt22sx4w6n1fa2dbbb-db91-4985-a2c8-61a7998a55b0",
						imgColor: "linear-gradient(180deg, #F3DB9B, #5EBBCF, #AAE6F2)",
						W: 92,
						H: 80,
					},
				],
			}
		},
		methods: {
			back() {
				//判断是否刷新了浏览器，刷新了浏览器，页面栈只有当前一个
				if (getCurrentPages() && getCurrentPages().length > 1) {
					uni.navigateBack()
				} else {
					history.back()
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.server-box {
		width: 100%;
		background-color: #fff;
	}

	// 头部
	.top {
		height: 164rpx;
		background: #fff;
		box-shadow: 0px 1px 1px 0px rgba(7, 7, 115, 0.07);
		border-radius: 5px;
		position: relative;

		.top_content {
			display: flex;
			align-items: center;
			justify-content: space-around;
			position: relative;
			top: 100rpx;
		}

		image {
			width: 20rpx;
			height: 34rpx;
		}

		.txt {
			font-size: 36rpx;
			font-family: Microsoft YaHei;
			font-weight: bold;
			color: #333333;
			width: 90%;
			text-align: center !important;
		}
	}

	// 宫格列表
	.list {
		width: 694rpx;
		height: 242rpx;
		background: #FFFFFF;
		box-shadow: 0px 1px 6px 0px rgba(7, 7, 115, 0.07), 0px -1px 6px 0px rgba(7, 7, 115, 0.05);
		border-radius: 9px;
		margin: 20rpx auto;
		display: flex;
		flex-wrap: wrap;

		.list_contnet {
			width: 33.3%;
			display: flex;
			align-items: center;
			justify-content: center;


			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 24rpx;
			}

			text {
				font-size: 26rpx;
				font-family: Microsoft YaHei;
				font-weight: bold;
				color: #333333;
			}
		}
	}

	// 马上领取
	.receive {
		margin: 20rpx auto;
		width: 696rpx;
		height: 84rpx;
		background: #FCF9F1;
		box-shadow: 0px 1px 6px 0px rgba(221, 174, 49, 0.09);
		border-radius: 9px;
		display: flex;
		align-items: center;
		justify-content: space-around;

		.left {
			display: flex;
			align-items: center;

			image {
				width: 38rpx;
				height: 32rpx;
				margin-right: 14rpx;
			}

			text {
				font-size: 22rpx;
				font-family: Microsoft YaHei;
				font-weight: bold;
				color: #666666;
			}
		}

		.right {
			width: 112rpx;
			height: 44rpx;
			background: #FFD098;
			border-radius: 4px;
			font-size: 20rpx;
			font-family: Microsoft YaHei;
			font-weight: bold;
			color: #660000;
			line-height: 44rpx;
			text-align: center;
		}
	}

	// 保洁到家
	.group_4 {
		margin: auto;
		width: 696rpx;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;

		.group_cont {
			width: 338rpx;
			height: 146rpx;
			background: linear-gradient(0deg, #EBF5FD 0%, #F5FEFF 100%);
			box-shadow: 0px 1px 6px 0px rgba(19, 31, 93, 0.09);
			border-radius: 5px;
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin-top: 20rpx;

			.txt_box {
				font-family: Microsoft YaHei;
			}

			.txt_box view:first-child {
				font-size: 28rpx;
				color: #6793D1;
			}

			.txt_box view:last-child {
				font-size: 20rpx;
				color: #556D8D;
				line-height: 40rpx;
			}

			.bg_box {
				background-size: 100% 100%;
			}
		}
	}
	
	// 物管办公室
	.office{
		width: 694rpx;
		height: 194rpx;
		background: #FFFFFF;
		box-shadow: 0px 1px 6px 0px rgba(7,7,115,0.05), 0px -1px 6px 0px rgba(7,7,115,0.05);
		border-radius: 9px;
		margin: 54rpx auto;
		padding-top: 28rpx;
		
		.tit{
			display: flex;
			align-items: center;
			
			image{
				width: 26rpx;
				height: 24rpx;
				margin-right: 10rpx;
				padding-left: 32rpx;
			}
			text{
				font-size: 32rpx;
				font-family: Microsoft YaHei;
				font-weight: bold;
				color: #5E5E5E;
			}
		}
		
		.txt{
			width: 606rpx;
			height: 60rpx;
			font-size: 22rpx;
			font-family: Microsoft YaHei;
			font-weight: bold;
			color: #999999;
			padding-left: 32rpx;
			margin-top: 10rpx;
		}
	}
</style>
